<template>
	<view>
		<!-- 赠送贝壳 -->
		<!-- 赠送贝壳开始 -->
		<uni-popup ref="shell" type="center" :isMaskClick="false">
			<view>
				<view
					style="height:500rpx;position: relative;width: 636rpx;background: url(../../static/erqi/send-bg.png) left bottom / 100% 100% no-repeat;border-radius: 16rpx;">
					<view style="" class="pr">
						<view class="center color-ffffff fs-34 pr bold pr" style="padding-top: 14rpx;z-index: 3;">
							兑换珍珠
						</view>
						<image src="../../static/erqi/send-bg2.png"
							style="position: absolute;z-index: 1;width: 278rpx;height: 92rpx;left: 50%;top:-14rpx;transform: translateX(-50%);"
							mode=""></image>
					</view>


					<view class="" style="width: 562rpx;margin-left: 38rpx;margin-top: 70rpx;">
						<!-- 名片 -->


						<view class="flex flex-y-center color-333333 fs-28 pr-24"
							style="height: 88rpx;border-radius: 8rpx;background-color: #FFFFFF;">
							<view class="color-333333 fs-28 pl-24">兑换数量</view>
							<input type="number" placeholder="请输兑换数量" class="fs-28 color-333333 flex-1"
								style="text-align: left;height: 80rpx;text-align: right;" v-model="number" :adjust-position="false"
								@input="number_input">
						</view>

						<!-- 名片 -->
						<view @tap.stop="send_beike" class="send-btn" :style="get_hui()?'':'opacity:0.5;'">确定兑换</view>
					</view>

				</view>



				<view class="flex flex-x-center" style="margin-top: 30rpx;">
					<text @tap="close" class="iconfont icon-guanbi1 color-ffffff fs-50"
						style="font-size: 56rpx;"></text>
				</view>

			</view>
		</uni-popup>
		<!-- 赠送贝壳结束 -->

		<!-- 支付密码 -->
		<pay ref="pay" @success="toufang_after"></pay>
		<!-- 支付密码 -->
	</view>
</template>

<script>
	export default {
		name: "duihuan",
		data() {
			return {
				mobile: '',
				user: null,
				code: '',
				img: "", //验证码图片
				uuid: '',
				imgcode: '',
				time: '发送验证码',
				number: '',
				currentTime: 60,
				shouxufei: '0',
			};
		},
		mounted() {
			this.get_money();
		},
		methods: {
			get_money() {
				this.request({
					url: '/common/TRANSFER_ACCOUNTS'
				}).then(res => {
					if (res.status == 200 && res.data) {
						this.shouxufei = this.xs((Number(res.data) * 100), 2);
					}
				});
			},
			get_hui() {
				if (this.number <= 0) {
					return false;
				}
				return true;
			},
			open() {
				this.$refs.shell.open();
				// this.get_code();
			},
			close() {
				this.$refs.shell.close();
			},
			get_code() {
				this.request({
					url: '/wechatLogin/code',

				}).then(res => {
					if (res.status == 200 && res.img) {
						this.$nextTick(() => {
							this.img = res.img;
							this.uuid = res.uuid;
							this.imgcode = '';
						})
					}
				});
			},
			sendRegistCode(e) {

				if (this.imgcode == '') {
					this.showToast('请输入图片验证码');
					return;
				}

				if (this.time != '发送验证码') {
					this.showToast('请稍等');
					return;
				}

				this.less(() => {


					let that = this;

					let interval;
					this.request({
						url: '/wechatLogin/getCodeByToken',
						data: {
							phone: this.user_info.phone,
							uuid: this.uuid,
							code: this.imgcode
						},
						loading: true,
					}).then(res => {
						if (res.status == 200) {
							this.showToast('验证码已发送', 3000);
							that.time = that.currentTime + 's后重新获取';
							that.disabled = true;
							interval = setInterval(function() {
								that.time = that.currentTime - 1 + 's后重新获取';
								that.currentTime--;
								if (that.currentTime <= 0) {
									clearInterval(interval)
									that.time = '发送验证码',
										that.currentTime = 60,
										that.disabled = false
								}
							}, 1000)
						} else {
							this.get_code();
						}
					})



				})

			},
			mobile_input() {
				if (String(this.mobile).length == 11) {
					this.get_user();
				} else {
					this.user = null;
				}
			},
			get_user() {

				this.request({
					url: '/wjuser/user/getUserForPhone',
					data: {
						phone: this.mobile,
					}
				}).then(res => {
					if (res.status == 200) {
						this.user = res.data;
						return;
					}
					this.user = null;
				});
			},
			send_beike() {

				if (this.number <= 0) {
					this.showToast('请输入贝壳数量');
					return false;
				}
				this.$refs.pay.open({
					money: this.number,
					// type: 2,
					text: '珍珠用于兑换商品或者参与奶茶店分红，兑换珍珠成功后，不可返回，请谨慎操作'
				});



			},
			toufang_after(pwd) {
				this.less(() => {
					this.request({
						url: '/wjuser/user/shellToIntegral',
						data: {
							id: this.user_info.id,
							money: this.number,
							code: pwd
						},
						method: 'POST',
						loading: true,

					}).then(res => {
						if (res.status == 200) {
							this.showToast('兑换成功');
							this.number = '';
							this.$emit('update');
							setTimeout(() => {
								this.close();
							}, 300);
						}
					});
				});
			},
			number_input() {
				clearTimeout(this.inputtimer);
				this.inputtimer = setTimeout(() => {
					if (String(this.number).indexOf('.') > -1 || String(this.number).indexOf('-') > -1) {

						this.number = this.xs(Math.abs(this.number), -1);
					}



				}, 200);
			},
		}
	}
</script>

<style lang="scss">
	.gave-user {
		height: 140rpx;

		height: 140rpx;
		background: #fff4e4;
		border: 2rpx solid rgba(252, 136, 0, 0.40);
		border-radius: 14rpx;
		margin-top: 30rpx;
		margin-bottom: 18rpx;
		text-align: left;
	}

	.send-verify {
		font-size: 26rpx;
		color: #3B52E7;
		padding: 8rpx 16rpx;
		border-radius: 8rpx;
		background: rgba(252, 136, 0, 0.15);
	}

	.send-btn {
		height: 88rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		color: #FFFFFF;
		background: #3B52E7;
		box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.20);
		border-radius: 44rpx;
		margin-top: 130rpx;
		font-size: 36rpx;
	}
</style>
